<template>
	<div id="jiaoliu">
		
		
		<div class="content">
			<ul>
				<li>
					<img src="../../../assets/img/communication.png" />
					<p>故宫的文创产品，给家里增添了不少文化气息</p>
					<div class="xinxiBox">
						<span class="headImg"></span>
						<span class="name">田田</span>
						<span class="city">北京</span>
					</div>
				</li>
				<li>
					<img src="../../../assets/img/kouhong3.png"/>
					<p>故宫的文创产品，给家里增添了不少文化气息</p>
					<div class="xinxiBox">
						<span class="headImg"></span>
						<span class="name">田田</span>
						<span class="city">北京</span>
					</div>
				</li>
				<li>
					<img src="../../../assets/img/guo.png"/>
					<p>故宫的文创产品，给家里增添了不少文化气息</p>
					<div class="xinxiBox">
						<span class="headImg"></span>
						<span class="name">田田</span>
						<span class="city">北京</span>
					</div>
				</li>
				<li>
					<img src="../../../assets/img/diezhi2.png" />
					<p>故宫的文创产品，给家里增添了不少文化气息</p>
					<div class="xinxiBox">
						<span class="headImg"></span>
						<span class="name">田田</span>
						<span class="city">北京</span>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	
	
	export default{
		components:{
			
			
		}
	}
</script>

<style>
	#jiaoliu{
		background: #FAF8F8;
	}
	
	#jiaoliu .content ul{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		height: 6.93rem;
		margin-left: 0.05rem;
	}
	
	#jiaoliu .content ul li{
		display: flex;
		flex-direction: column;
		width: 1.6rem;
		margin-top: 0.16rem;
		margin-left: 0.15rem;
	}
	
	#jiaoliu .content ul li img{
		width: 1.6rem;
	}
	
	#jiaoliu .content ul li p{
		font-size: 0.12rem;
		color: #333333;
		opacity: 1;
		margin: 0.08rem 0 0 0.04rem;
	}

	#jiaoliu .content .xinxiBox{
		margin-top: 0.14rem;
		display: flex;
	}
	#jiaoliu .content .xinxiBox .headImg{
		display: inline-block;
		width: 0.12rem;
		height: 0.12rem;
		background-image: url(../../../assets/img/communication%20circle_image_head%20portrait.png);
	}
	
	#jiaoliu .content .xinxiBox .name{
		font-size: 0.10rem;
		color: #333333;
		opacity: 1;
		margin-left:0.02rem ;
	}
	#jiaoliu .content .xinxiBox .city{
		font-size: 0.10rem;
		color: #999999;
		opacity: 1;
		margin-left:0.96rem ;
	}
	
</style>
